<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>智创</title>
    <link rel="stylesheet" th:href="@{/css/base.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/index.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/header.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/footer.css}" type="text/css">
    <script data-th-src="@{/js/echarts.js}"></script>
    <link rel="shortcut icon" type="image/png" th:href="@{/img/zc.ico}"/>
</head>
<body>
<main id="main" class="main">
    <div data-th-include="front/header" id="header"></div>
    <div id="blank" style="width: 20px;height:20px;"></div>
    <div id="stock" style="width: 1500px;height:800px;"></div>
    <div data-th-include="front/footer" id="footer"></div>
    <div id="lift">
        <ul class="lift_list">
            <li class="lift_item" data-site="#first">
                <span>智创<br/>荣誉</span>
            </li>
            <li class="lift_item" data-site="#second">
                <span>智创<br/>投资</span>
            </li>
            <li class="lift_item" data-site="#third">
                <span>智创<br/>策略</span>
            </li>
            <li class="lift_item" data-site="top">
                <span>回到<br/>顶部</span>
            </li>
        </ul>
    </div>
</main>
<script data-th-src="@{/js/jquery-3.2.1.js}"></script>
<script data-th-src="@{/js/header.js}"></script>
<script data-th-src="@{/js/base.js}"></script>
<script data-th-src="@{/js/index.js}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('stock'));

    // 指定图表的配置项和数据
    var upColor = '#ec0000';
    var upBorderColor = '#8A0000';
    var downColor = '#00da3c';
    var downBorderColor = '#008F28';

    var dataCount = 2e5;
    var data = generateOHLC(dataCount);

    var option = {
        dataset: {
            source: data
        },
        title: {
            text: 'Data Amount: ' + echarts.format.addCommas(dataCount)
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: false
                },
            }
        },
        grid: [
            {
                left: '10%',
                right: '10%',
                bottom: 200
            },
            {
                left: '10%',
                right: '10%',
                height: 80,
                bottom: 80
            }
        ],
        xAxis: [
            {
                type: 'category',
                scale: true,
                boundaryGap : false,
                // inverse: true,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            },
            {
                type: 'category',
                gridIndex: 1,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            }
        ],
        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }
        ],
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 10,
                end: 100
            },
            {
                show: true,
                xAxisIndex: [0, 1],
                type: 'slider',
                bottom: 10,
                start: 10,
                end: 100,
                handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '105%'
            }
        ],
        visualMap: {
            show: false,
            seriesIndex: 1,
            dimension: 6,
            pieces: [{
                value: 1,
                color: upColor
            }, {
                value: -1,
                color: downColor
            }]
        },
        series: [
            {
                type: 'candlestick',
                itemStyle: {
                    color: upColor,
                    color0: downColor,
                    borderColor: upBorderColor,
                    borderColor0: downBorderColor
                },
                encode: {
                    x: 0,
                    y: [1, 4, 3, 2]
                }
            },
            {
                name: 'Volumn',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    color: '#7fbe9e'
                },
                large: true,
                encode: {
                    x: 0,
                    y: 5
                }
            }
        ]
    };

    function generateOHLC(count) {
        var data = [];

        var xValue = +new Date(2019, 0, 1);
        var minute = 60 * 1000;
        var baseValue = Math.random() * 12000;
        var boxVals = new Array(4);
        var dayRange = 12;

        for (var i = 0; i < count; i++) {
            baseValue = baseValue + Math.random() * 20 - 10;

            for (var j = 0; j < 4; j++) {
                boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
            }
            boxVals.sort();

            var idxRandom = Math.random();
            var openIdx = Math.round(Math.random() * 3);
            var closeIdx = Math.round(Math.random() * 2);
            if (closeIdx === openIdx) {
                closeIdx++;
            }
            var volumn = boxVals[3] * (1000 + Math.random() * 500);

            // ['open', 'close', 'lowest', 'highest', 'volumn']
            // [1, 4, 3, 2]
            data[i] = [
                echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', xValue += minute),
                +boxVals[openIdx].toFixed(2), // open
                +boxVals[3].toFixed(2), // highest
                +boxVals[0].toFixed(2), // lowest
                +boxVals[closeIdx].toFixed(2),  // close
                volumn.toFixed(0),
                getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
            ];
        }

        return data;

        function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) {
            var sign;
            if (openVal > closeVal) {
                sign = -1;
            }
            else if (openVal < closeVal) {
                sign = 1;
            }
            else {
                sign = dataIndex > 0
                    // If close === open, compare with close of last record
                    ? (data[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1)
                    // No record of previous, set to be positive
                    : 1;
            }

            return sign;
        }
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>